<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <title>邻阿姨(LAY.COM)-去哪买,超市比价,附近价差排行,邻居互助</title>
    <link rel="stylesheet" type="text/css" href="../js/cube-ui/cube.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/member_order.css"/>
</head>
<body>
    <div class="app-shell" id="orderList" v-cloak>
        <div class="orderList-main">
            <div class="orderList-header"><i class="orderList-goback" @click="goback()">返回</i>{{typeTitle}}</div>

            <cube-tab-bar class="orderList-navBox" v-model="type" show-slider @click="clickHandler">
                <cube-tab v-for="item in types" :label="item.label" :key="item.label">{{item.label}}</cube-tab>
            </cube-tab-bar>

            <div class="orderList-container">
                <cube-slide
                    ref="orderListSlide"
                    :loop="loop"
                    :initial-index="initialIndex"
                    :auto-play="autoPlay"
                    :show-dots="showDots"
                    :options="slideOptions"
                    @change="changePage">
                    <!-- 全部订单 -->
                    <cube-slide-item>
                        <cube-scroll ref="allOrderList" :data="allOrderListData" :options="scrollOptions" @pulling-up="allOrderListMore">
                            <ul class="orderList-orderListUl" v-if="allOrderListData && allOrderListData.length > 0">
                                <li v-for="(order,index) in allOrderListData" :key="order.ordersId" class="orderList-goodsListBox">
                                    <div class="orderList-goodsHeader"><span>{{order.createDate}}</span><span class="orderList-orderStatus">{{order.status}}</span></div>
                                    <div class="orderList-goodsBox" v-for="product in order.shoppingCarList" :key="product.goodsSkuId" @click="toDetail(order)">
                                        <img :src="product.goodsSkuImage" class="orderList-goodsImg">
                                        <div class="orderList-goodsInfo">
                                            <h1 class="orderList-goodsName">{{product.goodsName}}</h1>
                                            <div class="orderList-priceBox">
                                                <span>最低价：{{product.minPrice}}元</span><span class="orderList-marketName">{{product.minSupermarketName}}</span>
                                                <span>最高价：{{product.maxPrice}}元</span><span class="orderList-marketName">{{product.maxSupermarketName}}</span>
                                            </div>
                                            <span class="orderList-goodsStatus">{{product.status}}</span>
                                            <span class="orderList-spreadRate">价差率：{{product.spreadRate}}</span>
                                            <span class="orderList-goodsNum">数量：×{{product.quantity}}</span>
                                            <span class="orderList-goodsTotal">合计：￥{{product.heJiPrice}}</span>
                                        </div>
                                    </div>
                                    <div class="orderList-footerBox">
                                        <span class="orderList-actual">实付：￥{{order.payPrice}}</span>
                                        <!-- <template v-if="order.status === 'PUBLISHING_PROCUREMENT'">
                                            <button class="order_btn_big btn_left" type="submit" @click="btnCancelOrder(index)">取消订单</button>
                                            <a :href="'tel:' + order.communityPhone" class="orderList-btnOrder">联系网点</a>
                                        </template> -->
                                        <template v-if="order.status === '商品采买中'">
                                            <a :href="'tel:' + order.communityPhone" class="orderList-btnOrder">联系网点</a>
                                        </template>
                                        <template v-else-if="order.status === '采买完成'">
                                            <a :href="'tel:' + order.communityPhone" class="orderList-btnOrder">联系网点</a>
                                        </template>
                                        <template v-else-if="order.status === '配送中'">
                                            <!--<button class="order_btn_sm btn_left" type="submit">拒收</button>-->
                                            <a class="orderList-btnOrder" @click="btnConfirmlOrder(order, index)">确认收货</a>
                                        </template>
                                        <template v-else-if="order.status === '已完成'">
                                            <!--<button class="order_btn_big btn_left" type="submit">退款售后</button>-->
                                            <a class="orderList-btnOrder" @click="btnBuy(order)">再来一单</a>
                                        </template>
                                        <template v-else-if="order.status === '已取消'">
                                            <a class="orderList-btnOrder" @click="btnBuy(order)">重新购买</a>
                                        </template>
                                    </div>
                                </li>
                            </ul>
                            <div class="orderList-noData" v-else-if="allOrderListData && allOrderListData.length === 0">您还没有{{typeName}}订单！</div>
                        </cube-scroll>
                    </cube-slide-item>
                    <!-- 待查询订单 -->
                    <cube-slide-item>
                        <cube-scroll ref="queryOrderList" :data="queryOrderListData" :options="scrollOptions" @pulling-up="queryOrderListMore">
                            <ul class="orderList-orderListUl" v-if="queryOrderListData && queryOrderListData.length > 0">
                                <li v-for="(order,index) in queryOrderListData" :key="order.ordersId" class="orderList-goodsListBox">
                                    <template v-if="order.isOrderSuccess === 'WAIT_DEAL'">
                                        <div class="orderList-goodsHeader"><span>{{order.createTime}}</span><span class="orderList-orderStatus">正在查询商品</span></div>
                                        <div class="orderList-queryBox">
                                            <div class="orderList-h3">{{order.brandName}} {{order.goodsName}} {{order.attrValue}}</div>
                                            <div class="orderList-queryInfoBox">
                                                <div class="orderList-tips">温馨提示：您提交的商品正在查询中，请稍后前往此页查看，我们也会将查询结果下发至您的手机，请注意查收。</div>
                                                <a class="orderList-btnOrder orderList-btnQuery" :href="'tel:' + order.communityPhone">联系网点</a>
                                            </div>
                                        </div>
                                    </template>
                                    <template v-else-if="order.isOrderSuccess === 'SUCCESS'">
                                        <div class="orderList-goodsHeader"><span>{{order.createTime}}</span><span class="orderList-orderStatus">正在查询商品</span></div>
                                        <div class="orderList-queryBox">
                                            <div class="orderList-h3">{{order.brandName}} {{order.goodsName}} {{order.attrValue}}</div>
                                            <div class="orderList-queryInfoBox">
                                                <div class="orderList-tips">商品信息获取成功，客服已与您取得联系！</div>
                                                <a class="orderList-btnOrder orderList-btnQuery" :href="'tel:' + order.communityPhone">联系网点</a>
                                            </div>
                                        </div>
                                    </template>
                                    <template v-else-if="order.isOrderSuccess === 'FAIL'">
                                        <div class="orderList-goodsHeader"><span>{{order.createTime}}</span><span class="orderList-orderStatus">正在查询商品</span></div>
                                        <div class="orderList-queryBox">
                                            <div class="orderList-h3">{{order.brandName}} {{order.goodsName}} {{order.attrValue}}</div>
                                            <div class="orderList-queryInfoBox">
                                                <div class="orderList-tips orderList-orange">商品信息获取成功，客服已与您取得联系！</div>
                                                <a class="orderList-btnOrder orderList-btnQuery" :href="'tel:' + order.communityPhone">联系网点</a>
                                            </div>
                                        </div>
                                    </template>
                                </li>
                            </ul>
                            <div class="orderList-noData" v-else-if="queryOrderListData && queryOrderListData.length === 0">您还没有{{typeName}}订单！</div>
                        </cube-scroll>
                    </cube-slide-item>
                    <!-- 进行中订单 -->
                    <cube-slide-item>
                        <cube-scroll ref="inProgressOrderList" :data="inProgressOrderListData" :options="scrollOptions" @pulling-up="inProgressOrderListMore">
                            <ul class="orderList-orderListUl" v-if="inProgressOrderListData && inProgressOrderListData.length > 0">
                                <li v-for="(order,index) in inProgressOrderListData" :key="order.ordersId" class="orderList-goodsListBox">
                                    <div class="orderList-goodsHeader"><span>{{order.createDate}}</span><span class="orderList-orderStatus">{{order.status}}</span></div>
                                    <div class="orderList-goodsBox" v-for="product in order.shoppingCarList" :key="product.goodsSkuId" @click="toDetail(order)">
                                        <img :src="product.goodsSkuImage" class="orderList-goodsImg">
                                        <div class="orderList-goodsInfo">
                                            <h1 class="orderList-goodsName">{{product.goodsName}}</h1>
                                            <div class="orderList-priceBox">
                                                <span>最低价：{{product.minPrice}}元</span><span class="orderList-marketName">{{product.minSupermarketName}}</span>
                                                <span>最高价：{{product.maxPrice}}元</span><span class="orderList-marketName">{{product.maxSupermarketName}}</span>
                                            </div>
                                            <span class="orderList-goodsStatus">{{product.status}}</span>
                                            <span class="orderList-spreadRate">价差率：{{product.spreadRate}}</span>
                                            <span class="orderList-goodsNum">数量：×{{product.quantity}}</span>
                                            <span class="orderList-goodsTotal">合计：￥{{product.heJiPrice}}</span>
                                        </div>
                                    </div>
                                    <div class="orderList-footerBox">
                                        <span class="orderList-actual">实付：￥{{order.payPrice}}</span>
                                        <!-- <template v-if="order.status === 'PUBLISHING_PROCUREMENT'">
                                            <button class="order_btn_big btn_left" type="submit" @click="btnCancelOrder(index)">取消订单</button>
                                            <a :href="'tel:' + order.communityPhone" class="orderList-btnOrder">联系网点</a>
                                        </template> -->
                                        <template v-if="order.status === '商品采买中'">
                                            <a :href="'tel:' + order.communityPhone" class="orderList-btnOrder">联系网点</a>
                                        </template>
                                        <template v-else-if="order.status === '采买完成'">
                                            <a :href="'tel:' + order.communityPhone" class="orderList-btnOrder">联系网点</a>
                                        </template>
                                        <template v-else-if="order.status === '配送中'">
                                            <!--<button class="order_btn_sm btn_left" type="submit">拒收</button>-->
                                            <a class="orderList-btnOrder" @click="btnConfirmlOrder(order, index)">确认收货</a>
                                        </template>
                                        <template v-else-if="order.status === '已完成'">
                                            <!--<button class="order_btn_big btn_left" type="submit">退款售后</button>-->
                                            <a class="orderList-btnOrder" @click="btnBuy(order)">再来一单</a>
                                        </template>
                                        <template v-else-if="order.status === '已取消'">
                                            <a class="orderList-btnOrder" @click="btnBuy(order)">重新购买</a>
                                        </template>
                                    </div>
                                </li>
                            </ul>
                            <div class="orderList-noData" v-else-if="inProgressOrderListData && inProgressOrderListData.length === 0">您还没有{{typeName}}订单！</div>
                        </cube-scroll>
                    </cube-slide-item>
                    <!-- 已完成订单 -->
                    <cube-slide-item>
                        <cube-scroll ref="finishedOrderList" :data="finishedOrderListData" :options="scrollOptions" @pulling-up="finishedOrderListMore">
                            <ul class="orderList-orderListUl" v-if="finishedOrderListData && finishedOrderListData.length > 0">
                                <li v-for="(order,index) in finishedOrderListData" :key="order.ordersId" class="orderList-goodsListBox">
                                    <div class="orderList-goodsHeader"><span>{{order.createDate}}</span><span class="orderList-orderStatus">{{order.status}}</span></div>
                                    <div class="orderList-goodsBox" v-for="product in order.shoppingCarList" :key="product.goodsSkuId" @click="toDetail(order)">
                                        <img :src="product.goodsSkuImage" class="orderList-goodsImg">
                                        <div class="orderList-goodsInfo">
                                            <h1 class="orderList-goodsName">{{product.goodsName}}</h1>
                                            <div class="orderList-priceBox">
                                                <span>最低价：{{product.minPrice}}元</span><span class="orderList-marketName">{{product.minSupermarketName}}</span>
                                                <span>最高价：{{product.maxPrice}}元</span><span class="orderList-marketName">{{product.maxSupermarketName}}</span>
                                            </div>
                                            <span class="orderList-goodsStatus">{{product.status}}</span>
                                            <span class="orderList-spreadRate">价差率：{{product.spreadRate}}</span>
                                            <span class="orderList-goodsNum">数量：×{{product.quantity}}</span>
                                            <span class="orderList-goodsTotal">合计：￥{{product.heJiPrice}}</span>
                                        </div>
                                    </div>
                                    <div class="orderList-footerBox">
                                        <span class="orderList-actual">实付：￥{{order.payPrice}}</span>
                                        <!-- <template v-if="order.status === 'PUBLISHING_PROCUREMENT'">
                                            <button class="order_btn_big btn_left" type="submit" @click="btnCancelOrder(index)">取消订单</button>
                                            <a :href="'tel:' + order.communityPhone" class="orderList-btnOrder">联系网点</a>
                                        </template> -->
                                        <template v-if="order.status === '商品采买中'">
                                            <a :href="'tel:' + order.communityPhone" class="orderList-btnOrder">联系网点</a>
                                        </template>
                                        <template v-else-if="order.status === '采买完成'">
                                            <a :href="'tel:' + order.communityPhone" class="orderList-btnOrder">联系网点</a>
                                        </template>
                                        <template v-else-if="order.status === '配送中'">
                                            <!--<button class="order_btn_sm btn_left" type="submit">拒收</button>-->
                                            <a class="orderList-btnOrder" @click="btnConfirmlOrder(order, index)">确认收货</a>
                                        </template>
                                        <template v-else-if="order.status === '已完成'">
                                            <!--<button class="order_btn_big btn_left" type="submit">退款售后</button>-->
                                            <a class="orderList-btnOrder" @click="btnBuy(order)">再来一单</a>
                                        </template>
                                        <template v-else-if="order.status === '已取消'">
                                            <a class="orderList-btnOrder" @click="btnBuy(order)">重新购买</a>
                                        </template>
                                    </div>
                                </li>
                            </ul>
                            <div class="orderList-noData" v-else-if="finishedOrderListData && finishedOrderListData.length === 0">您还没有{{typeName}}订单！</div>
                        </cube-scroll>
                    </cube-slide-item>
                    <!-- 已取消订单 -->
                    <cube-slide-item>
                        <cube-scroll ref="canceledOrderList" :data="canceledOrderListData" :options="scrollOptions" @pulling-up="canceledOrderListMore">
                            <ul class="orderList-orderListUl" v-if="canceledOrderListData && canceledOrderListData.length > 0">
                                <li v-for="(order,index) in canceledOrderListData" :key="order.ordersId" class="orderList-goodsListBox">
                                    <div class="orderList-goodsHeader"><span>{{order.createDate}}</span><span class="orderList-orderStatus">{{order.status}}</span></div>
                                    <div class="orderList-goodsBox" v-for="product in order.shoppingCarList" :key="product.goodsSkuId" @click="toDetail(order)">
                                        <img :src="product.goodsSkuImage" class="orderList-goodsImg">
                                        <div class="orderList-goodsInfo">
                                            <h1 class="orderList-goodsName">{{product.goodsName}}</h1>
                                            <div class="orderList-priceBox">
                                                <span>最低价：{{product.minPrice}}元</span><span class="orderList-marketName">{{product.minSupermarketName}}</span>
                                                <span>最高价：{{product.maxPrice}}元</span><span class="orderList-marketName">{{product.maxSupermarketName}}</span>
                                            </div>
                                            <span class="orderList-goodsStatus">{{product.status}}</span>
                                            <span class="orderList-spreadRate">价差率：{{product.spreadRate}}</span>
                                            <span class="orderList-goodsNum">数量：×{{product.quantity}}</span>
                                            <span class="orderList-goodsTotal">合计：￥{{product.heJiPrice}}</span>
                                        </div>
                                    </div>
                                    <div class="orderList-footerBox">
                                        <span class="orderList-actual">实付：￥{{order.payPrice}}</span>
                                        <!-- <template v-if="order.status === 'PUBLISHING_PROCUREMENT'">
                                            <button class="order_btn_big btn_left" type="submit" @click="btnCancelOrder(index)">取消订单</button>
                                            <a :href="'tel:' + order.communityPhone" class="orderList-btnOrder">联系网点</a>
                                        </template> -->
                                        <template v-if="order.status === '商品采买中'">
                                            <a :href="'tel:' + order.communityPhone" class="orderList-btnOrder">联系网点</a>
                                        </template>
                                        <template v-else-if="order.status === '采买完成'">
                                            <a :href="'tel:' + order.communityPhone" class="orderList-btnOrder">联系网点</a>
                                        </template>
                                        <template v-else-if="order.status === '配送中'">
                                            <!--<button class="order_btn_sm btn_left" type="submit">拒收</button>-->
                                            <a class="orderList-btnOrder" @click="btnConfirmlOrder(order, index)">确认收货</a>
                                        </template>
                                        <template v-else-if="order.status === '已完成'">
                                            <!--<button class="order_btn_big btn_left" type="submit">退款售后</button>-->
                                            <a class="orderList-btnOrder" @click="btnBuy(order)">再来一单</a>
                                        </template>
                                        <template v-else-if="order.status === '已取消'">
                                            <a class="orderList-btnOrder" @click="btnBuy(order)">重新购买</a>
                                        </template>
                                    </div>
                                </li>
                            </ul>
                            <div class="orderList-noData" v-else-if="canceledOrderListData && canceledOrderListData.length === 0">您还没有{{typeName}}订单！</div>
                        </cube-scroll>
                    </cube-slide-item>
                </cube-slide>
            </div>
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/fetch20190612.js"></script>
    <script src="../js/rem.js"></script>
    <script src="../js/cube-ui/cube.min.js"></script>
    <script src="js/member_order.js"></script>
</body>
</html>